<script setup>

import api from './api.js'

const title = ref("选择用户");
const openFlag = ref(false);
const tableRef = ref();
const single = ref(true);
const tableData = reactive({
  loading: false,
  list: [],
  paging: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
});
const queryParams = reactive({
  number: null,
  name: null,
  state: 0
});

/**
 * 数据重置
 */
function reset() {
  tableRef.value.clearRadioRow();
  tableData.paging.pageNum = 1;
}

function open(isSingle) {
  single.value = isSingle;
  openFlag.value = true;
  getList();
}

function close() {
  openFlag.value = false;
}

/** 查询资产清单表列表 */
async function getList(state) {
  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  query.state = state;
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq).then(response => {
    tableData.list = response.records;
    tableData.paging.total = response.total;
    tableData.paging.pageNum = response.current;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

const emit = defineEmits(['sub'])

function sub() {
  let res;
  if (single.value) {
    const record = tableRef.value.getRadioRecord();
    res = [{
      userId: record.userId,
      nickName: record.nickName
    }]
  } else {
    const records = tableRef.value.getCheckboxRecords();
    res = records.map(item=> {
      return {
        userId: item.userId,
        nickName: item.nickName
      }
    })
  }
  emit('sub', res);
  close();
}

defineExpose({
  open
})

</script>

<template>
  <div>
    <el-dialog ref="dialog" v-model="openFlag" :title="title" width="50%" append-to-body>
      <vxe-table style="height: 100%;flex-grow: 1;"
                 border="full"
                 ref="tableRef"
                 :column-config="{resizable: true}"
                 :data="tableData.list">
        <vxe-column v-if="single" type="radio" title=""></vxe-column>
        <vxe-column v-if="!single" type="checkbox" title=""></vxe-column>
        <vxe-column field="userName" title="登录名"></vxe-column>
        <vxe-column field="nickName" title="真实姓名"></vxe-column>
        <vxe-column field="phonenumber" title="电话"></vxe-column>
        <vxe-column field="email" title="邮箱"></vxe-column>
        <vxe-column field="remark" title="备注"></vxe-column>
      </vxe-table>

      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<style scoped lang="scss">

</style>